<template>
  <el-dialog :title="titleList[flag]+'（'+form.orderNo+'）'" :visible.sync="dialogVisible" width="60%" append-to-body>
    <div v-loading="loading">
      <div>
        <div class="myTitle">商品信息</div>
        <div v-if="flag==0">
          <el-button type="primary" plain @click="matList.push({quantity:1})">新增</el-button>
          <el-button plain @click="matList=[]">清空</el-button>
        </div>
        <el-table
          :data="matList"
          max-height="500"
        >
          <el-table-column type="index" label="序号" align="center"></el-table-column>
          <el-table-column prop="productName" label="商品信息" align="center">
            <template slot-scope="scope">
              <div v-if="flag==1">{{ scope.row.productName }}</div>
              <el-select v-else v-model="scope.row.productId" filterable
                         @change="changeMat(scope.row.productId,scope.row)"
                         style="width: 100%">
                <el-option
                  v-for="item in matSelect"
                  :key="item.skuId"
                  :label="item.productName"
                  :value="item.productId">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="imageUrl" label="图片" align="center" width="100">
            <template slot-scope="scope">
              <div v-if="!scope.row.imageUrl">暂无</div>
              <el-image
                v-else
                style="width: 80px;height: 80px"
                :src="scope.row.imageUrl"
                fit="contain"
                :preview-src-list="[scope.row.imageUrl]"
              >
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="skuName" label="规格名称" align="center"/>
          <el-table-column prop="unitPrice" label="单价(元)" align="center" width="120"/>
          <el-table-column prop="quantity" label="数量" align="center" width="120">
            <template slot-scope="scope">
              <div v-if="flag==1">{{ scope.row.quantity }}</div>
              <el-input v-else type="number" v-model="scope.row.quantity" placeholder="请输入" :min="0"
                        :max="scope.row.inventoryQuantity"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="inventoryQuantity" label=库存数量 align="center" width="120">
            <template slot-scope="scope">
              <div>{{ scope.row.inventoryQuantity }}</div>
            </template>
          </el-table-column>
          <el-table-column label='删除' align="center" width="80">
            <template slot-scope="scope">
              <el-button type="text" @click="deleteMat(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible=false">取 消</el-button>
      <el-button type="primary" @click="dialogOk" v-if="flag==0">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  listStoreOrder, addSingLeGood, getCustomOrder, deleteSingLeGood
} from "../../../api/imsMng";


export default {
  data() {
    return {
      flag: 0,
      loading: false,
      dialogVisible: false,
      form: {},
      titleList: ['新增单品', '删除单品'],
      matList: [],
      matSelect: []
    }
  },
  methods: {
    show(form) {
      this.dialogVisible = true
      this.form = {}
      this.resetForm('form')
      this.flag = form.flag
      this.form.id = form.id
      this.form.orderNo = form.orderNo
      this.matList = []
      if (this.flag == 0) {
        this.getList()
      } else {
        this.getDetail()
      }
    },
    getDetail() {
      this.loading = true
      getCustomOrder(this.form.id).then(res => {
        this.matList = res.data.matPartProductVos
      }).finally(e => {
        this.loading = false
      })
    },
    getList() {
      this.loading = true
      listStoreOrder({pageSize: -1, priceType: 1}).then(res => {
        this.matSelect = res.rows
      }).finally(e => {
        this.loading = false
      })
    },
    changeMat(e, row) {
      let list = this.matSelect.filter(val => val.productId == e)
      row.productName = list[0].productName
      row.imageUrl = list[0].imageUrl
      row.skuName = list[0].skuName
      row.unitPrice = list[0].unitPrice
      row.inventoryQuantity = list[0].inventoryQuantity
      row.priceType = list[0].priceType
      row.productType = list[0].productType
    },
    deleteMat(row) {
      if (this.flag == 0) {
        this.matList = this.matList.filter(e => e != row)
      } else {
        let req = {
          id: this.form.id,
          customerOrderMatPartBoList: [row]
        }
        this.loading = true
        deleteSingLeGood(req).then(res => {
          this.getDetail()
          this.$message.success('删除成功')
        }).finally(e => {
          this.loading = false
        })
      }
    },
    dialogOk() {
      if (!this.matList.length) {
        this.$message.error('商品信息不能为空')
        return
      }
      let req = {
        id: this.form.id,
        customerOrderMatPartBoList: this.matList
      }
      this.loading = true
      addSingLeGood(req).then(res => {
        this.$emit('ok')
        this.dialogVisible = false
        this.$message.success('新增成功')
      }).finally(e => {
        this.loading = false
      })
    }
  }
}
</script>
